import {Canvas, Meta, Story, ArgsTable} from '@storybook/addon-docs';
import {PreviewGrid, PreviewCard, PreviewContainer, LabelContainer} from '../storybook/PreviewGallery';
import * as Illustrations from '../illustrations';

<Meta
  title="Guidelines/Illustrations"
  argTypes={{
    size: {control: {type: 'select'}, options: [128, 256]},
  }}
  args={{size: 128}}
  parameters={{viewMode: 'story'}}
/>

# Illustrations

Illustrations are visually and emotionally powerful tools. Carefully identify the correct illustration in accordance with the content. If an illustration is used only as a decorative element, it can lose communication power and distract people. Use illustrations to encourage users who are frustrated, lost or have problems. For example, a page without results.

## Gallery

<ArgsTable story="Standard" />

<Canvas>
  <Story name="Standard">
    {args => {
      return (
        <PreviewGrid width={args.size + 40}>
          {Object.keys(Illustrations).map(illustrationName => {
            return (
              <PreviewCard key={illustrationName}>
                <PreviewContainer>{React.createElement(Illustrations[illustrationName], {...args})}</PreviewContainer>
                <LabelContainer>{illustrationName.replace('Illustration', '')}</LabelContainer>
              </PreviewCard>
            );
          })}
        </PreviewGrid>
      );
    }}
  </Story>
</Canvas>
